import { useState, useEffect } from "react";
import {
    increment,
    decrement,
    asyncincrement,
    asyncdecrement,
} from "./store/actions";
import store from "./store";

const App = () => {
    const [counts, setCounts] = useState(store.getState().count);
    useEffect(() => {
        store.subscribe(() => {
            setCounts(store.getState().count);
        });
    }, []);
    return (
        <>
            <div className="page-header">
                <h1>
                    Redux <small>基本使用</small>
                </h1>
            </div>
            <div className="page-content">
                <div className="wrapper wrapper1">
                    <div className="alert alert-danger">
                        当前counts的值为：{counts}
                    </div>
                    <div className="btn-group">
                        <div
                            className="btn btn-default"
                            onClick={() => store.dispatch(asyncincrement(1))}
                        >
                            异步增加
                        </div>
                        <div
                            className="btn btn-danger"
                            onClick={() => store.dispatch(asyncdecrement(1))}
                        >
                            异步增加
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default App;
